<template>
	<view class="container">
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<image src="../../static/logo.png" class="wx-logo" mode="widthFix"></image>
			<view class="logo-text">企惠</view>
			<view class="describe">点击微信授权使用手机号登录</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="confirm-btn" open-type="getPhoneNumber" @getphonenumber="wxGetPhoneNumber">微信授权手机号</button>
			<!-- #endif -->
			<!-- <view class="forget-section">手机号码登录/注册</view> -->
		</view>
		<view class="register-section">
			登录代表您同意
			<text @click="toRegist">企惠用户协议、隐私策略</text>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
	data() {
		return {
			mobile: '',
			password: '',
			logining: false,
			regkey:''
		};
	},
	onLoad(options) {
		console.log(options)
		this.regkey = options.regkey;
	},
	methods: {
		...mapMutations(['login']),
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
		},
		wxGetUserInfo(res) {
			if (!res.detail.iv) {
				uni.showToast({
					title: '您取消了授权,登录失败',
					icon: 'none'
				});
				return false;
			}
			console.log('-------用户授权，并获取用户基本信息和加密数据------');
			console.log(res.detail);
		},
		wxGetPhoneNumber(e) {
			const { $http, login,$requestApi } = this;
			let that = this;
			if (!e.detail.iv) {
				uni.showToast({
					title: '您取消了授权,登录失败',
					icon: 'none'
				});
				return false;
			}
			uni.showLoading({
			    title: '加载中'
			});
			// uni.getStorage({
			// 	key: 'session',
			// 	success: function(res) {
					$http
						.request({
							method: 'POST', // 请求方法必须大写
							url: $requestApi.loginByPhone,
							data: {
								regkey: that.regkey,
								encrypted_data: e.detail.encryptedData,
								iv: e.detail.iv
							}
						})
						.then(res => {
							if (res.data.code === 200) {
								uni.setStorageSync('token', res.data.result.token);
								
								that.loadUserInfo(login);
							}
						})
						.catch(err => {
							console.log(err);
						});
			// 	}
			// });
		},
		// 加载基本信息
		loadUserInfo(login){
			this.$http.request({
				method: 'POST', // 请求方法必须大写
				url: this.$requestApi.getUserInfo,
				data: {}
			})
			.then(result => {
				uni.hideLoading();
				let _data = result.data;
				console.log(_data)
				if (_data.code === 200) {
					uni.navigateBack();
					login({ ... _data.result });
				}
			})
			.catch(err => {
				console.log(err);
			});
		},
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.container {
	padding-top: 100px;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #fff;
}
.wrapper {
	position: relative;
	z-index: 90;
	background: #fff;
	text-align: center;
	.wx-logo{
		width: 340upx;
		height: auto;
		border-radius: 50%;
	}
}
.back-btn {
	position: absolute;
	left: 40upx;
	z-index: 9999;
	padding-top: var(--status-bar-height);
	top: 40upx;
	font-size: 40upx;
	color: $font-color-dark;
}
.logo-text {
	font-size: 48upx;
	font-weight: 600;
	text-align: center;
	margin-bottom: 20upx;
}
.describe {
	font-size: $font-base;
	text-align: center;
	color: #c0c4cc;
}
.confirm-btn {
	width: 630upx;
	height: 76upx;
	line-height: 76upx;
	border-radius:10px;
	margin-top: 120upx;
	background:rgba(255,94,0,1);
	color: #fff;
	font-size: 34upx;
	&:after {
		border-radius: 100px;
	}
}
.forget-section {
	font-size: 28upx;
	color: #007AFF;
	text-align: center;
	margin-top: 20upx;
}
.register-section {
	position: absolute;
	left: 0;
	bottom: 50upx;
	width: 100%;
	font-size: 28upx;
	color:#8E8E93;
	text-align: center;
	text {
		color: #007AFF;
		margin-left: 10upx;
	}
}
</style>
